<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
</head>
<style>

/*内部选择器*/
    h4{
        color: red;
    }
    div{
        width: 50px;
        height: 100px;
        background-color: cyan;
    }
    /*锚点选择器选择id*/
    #d2{
        color: red;
    }
    /*伪类选择器 类似和&&只能写状态*/
    #d2:hover{
        background-color: gray;
    }
    /*class选择类*/
    .error{
        background-color: red;
        color: white;
    }
    .success
    {
        background-color: green;
        color: white;
    }
    /*全局选择器*/
    *{
        font-style: italic;
    }
    /*英文,类似于货||*/
    #d2,.success{
        text-decoration: underline;
    }
    /*选中超链接未被访问过 （超链接独有） 默认是蓝色*/
    a:link{
        color: gray;
    }
    /*选中被访问过的超链接 （超链接独有）*/
    a:visited{
        color: green;
    }
    /*选中悬停时超链接（超链接独有）*/
    a:hover{
            color: purple;
    }
    /*选中激活的超链接（超链接独有）*/
    a:active{
        color: orange;
    }
    [type="text"]{
        background-color: yellow;
    }
    /*后代选择器*/
    #d1 span{
        background-color: magenta;
    }
    #d1>div>span{
        color: yellow;
    }
</style>
<body>
<h4>我是标题</h4>
<p>我是段落</p>
<a href="#">我是超链接</a>
<h4>我是标题</h4>
<div>我是div1</div>
<div id="d2">我是div2</div>
<div>我是div3</div>
<hr>
<span class="error" >用户名已被占用</span>
<span class="error">操作失败</span>
<hr>
<span class="error">有效的手机号</span>
<span class="success">新增成功</span>
<hr>
<a href="https://www.baidu.com">百度地址</a>
<a href="abc">错误地址1</a>
<a href="bcd">错误地址2</a>
<hr>
<input type="text">账号
<input type="password">密码
<hr>
<div id="d1">
    <span>1</span>
    <div>
        <span>2</span>
        <br>
        <b>测试文字</b>
    </div>
    <span>3</span>
</div>

</body>
</html>